"use client";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { GitBranch, Package, Bot, Repeat } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
interface MenuItem {
  icon: React.ReactNode;
  href: string;
  tooltip: string;
}

const menuItems: MenuItem[] = [
  {
    icon: <GitBranch className="h-5 w-5" />,
    href: "/workflow",
    tooltip: "工作流",
  },
  {
    icon: <Bot className="h-5 w-5" />,
    href: "/agent",
    tooltip: "智能体",
  },
  {
    icon: <Package className="h-5 w-5" />,
    href: "/resource",
    tooltip: "资源",
  },
  {
    icon: <Repeat className="h-5 w-5" />,
    href: "/outloop",
    tooltip: "外环",
  },
];

export function Sidebar({ className }: { className?: string }) {
  const pathname = usePathname();

  return (
    <div
      className={cn("flex flex-col gap-2 p-2 m-2 rounded bg-muted", className)}
    >
      {menuItems.map((item) => (
        <Button
          key={item.href}
          asChild
          variant={pathname.startsWith(item.href) ? "default" : "ghost"}
          size="icon"
        >
          <Link href={item.href} title={item.tooltip}>
            {item.icon}
          </Link>
        </Button>
      ))}
    </div>
  );
}
